<script setup lang="ts">
import {computed, ref} from "vue";

interface Props {
  flow?: string;
}


// const props = defineProps({
//   flow: {
//     type: String,
//     default: "row"
//   }
// });
//带默认值的属性定义
const props = withDefaults(defineProps<Props>(), {
  flow: "row"
});
const style = computed(() => {
  return {
    "grid-auto-flow": props.flow
  };
});

</script>

<template>
  <div class="container" :style="style">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
    <div class="item item-10">10</div>
  </div>
</template>

<style scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas: 'a b c' 'd e f' 'g h i';

}

.item {
  line-height: 100px;
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #ef342a;
}

.item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

.item-10 {
  background-color: #589336;
}

.item-11 {
  background-color: #cf8e7f;
}

.item-12 {
  background-color: #b8256f;
}

.item-12 {
  background-color: #d39c10;
}

.item-13 {
  background-color: #756bc8;
}

.item-14 {
  background-color: #ba1680;
}

.item-15 {
  background-color: #d12222;
}

.item-16 {
  background-color: #10e122;
}
</style>